let baseURL = 'http://127.0.0.1:8888';
// let baseURL = '192.168.18.185:8888';

//用户头像
let _avatar;
//用户账号
let _account;

//chat
let otherTalkContent = document.querySelector('.other .right .talkContent');
let ownTalkContent = document.querySelector('.other .left .talkContent');
let userIcon = document.querySelector('.common .userIcon');
// let usersList = document.querySelector('.userList>.userItem');

//promise(获取用户的数据)
let p = new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('get', baseURL + '/index');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send();
    xhr.onload = function () {
        let result = JSON.parse(xhr.response);
        console.log('result', result);
        resolve(result);
    }
})
p.then(value => {
    console.log('value', value)
    _avatar = value.userAvatar;
    nickname = value.userNickname;
    _account = value.userAccount;
    userIcon.innerHTML = nickname;
    //初始化左上角头像
    userIcon.innerHTML = `<img src="${_avatar}"/>`;
})

//连接websocket服务器
let socket = io(`${baseURL}`);

let divContent = document.querySelector('.content');
let sendBtn = document.querySelector('.sendBtn');
let input = document.querySelector('textarea');


//监听addUsr事件
socket.on('addUsr', function (data) {
    console.log('socket', socket);
    console.log('data', data)
    let {avatar, account, usersList} = data;
    socket._avatar = avatar;
    socket._account = account;
    console.log(_avatar, _account);
    //用户列表
    let userLIst = document.querySelector('.userList>.userItem');
    //内容栏
    divContent.innerHTML += `<div class="system"><span>${account}加入群聊</span></div>`;
    document.querySelector('.system:nth-last-child(1)').scrollIntoView(false);
    userLIst.innerHTML = usersList.map((item) => {
        console.log('item', item);
        return `<div class="users">
                        <div class="users_img"><img src="${item.avatar}"/></div>
                        <div class="users_nickname">${item.io_account}</div>
                    </div>`;
    }).join('');
    console.log(document.querySelector('.userItem>div:nth-last-child(1)'));
    document.querySelector('.userItem>div:nth-last-child(1)').scrollIntoView(false);
})

//发送
sendBtn.onclick = function () {
    let obj = {};
    obj.avatar = socket._avatar;
    obj.account = socket._account;
    obj.data = input.value;
    console.log('发送', obj);
    socket.emit('sendMsg', obj);
}
socket.on('msg', function (data) {
    console.log(_account)
    console.log('msg', data);
    //自己发的
    if (_account === `${data.account}`) {
        divContent.innerHTML += `<div class="own">
                                    <div class="img"><img src="${data.avatar}"/></div>
                                    <div class="left">
                                        <div class="nickname">${data.account}</div>
                                        <div class="talkContent">${data.data}</div>
                                    </div>
                                </div>`;
        document.querySelector('.content>div:nth-last-of-type(1)').scrollIntoView(false);
    } else {
        divContent.innerHTML += `<div class="other">
                                    <div class="img"><img src="${data.avatar}"/></div>
                                    <div class="right">
                                        <div class="nickname">${data.account}</div>
                                        <div class="talkContent">${data.data}</div>
                                    </div>
                                </div>`;
        document.querySelector('.content>div:nth-last-of-type(1)').scrollIntoView(false);
    }
})

//用户离开
socket.on('someoneLeave', (data) => {
    let {nickname} = data
    console.log('用户离开', data);
    divContent.innerHTML += `<div class="system"><span>${nickname}离开群聊</span></div>`;
    usersList.innerHTML = data.usersList.map((item) => {
        return `<div class="users">
                        <div class="users_img"><img src="${item.avatar}"/></div>
                        <div class="users_nickname">${item.nickname}</div>
                    </div>`;
    }).join('');
})